﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        div {
            width: 750px;
            margin: 0 auto;
        }

        ul {
            display: flex;
        }

            ul > li {
                width: 70px;
                height: 250px;
                overflow: hidden;
                transition: width .2s linear;
            }

        img {
            display: block;
            width: 400px;
            height: 250px;
        }

        ol {
            display: flex;
        }

            ol > li {
                width: 10px;
                height: 10px;
                margin: 10px;
                background-color: aquamarine;
            }

                ol > li:first-child {
                    background-color: red;
                }
    </style>
</head>
<body>
    <div>
        <ul>

        </ul>
        <ol>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>
    <script>
        var str = "https://www.jq22.com/demo/jquerylbqh201910210040/images/0";
        let str1 = ``;
        for (var i = 1; i < 7; i++) {
            var url = `${str}${i}.png`;
            str1 += `<li><p>${i}</p>
                    <img src="${url}" alt="tu">
                     </li>`;
        }
        let ul = document.querySelector(`ul`);
        let ol = document.querySelector(`ol`)
        ul.innerHTML = str1;

        let lis = ul.children;  
        let lis1 = ol.children;
        lis[0].style.width = `400px`;
        for (let i = 0; i < lis.length; i++) {
            lis[i].onclick = function () {
                for (var j = 0; j < lis.length; j++) {
                    lis[j].style.width = `70px`;
                    lis1[j].style.backgroundColor = "aquamarine";
                 }
                this.style.width = `400px`;
                lis1[i].style.backgroundColor = "red";
            }
        }
    </script>
</body>
</html>
